<template>
  <div id="app">
    <img src="./assets/zui.svg" width="200px">
    <div>
      
    </div>
    <div class="content">
      <z-card>
        <z-line lableName="名称：">zui</z-line>
        <z-line lableName="z-search:"><z-search placeholder="请输入菜单名称" :list="list"></z-search></z-line>
        <z-line lableName="z-Tip:">
          <z-tip content="距离结束还有${day}天," day="8" :dayStyle="{color: 'red', fontWeight: 'bold'}" dayUrl="https://www.baidu.com" ></z-tip>
          <z-tip content="点击${day}到申请页面" day="跳转" :dayStyle="{color: 'blue'}" dayUrl="https://www.baidu.com" ></z-tip>
        </z-line>
        <z-line lableName="状态：">
          <z-tag >正常</z-tag>
          <z-tag color="#FFFFFF" bg-color="#32C5FF" bor-color="#32C5FF">正常</z-tag>
          <z-tag  color="#32C5FF" bg-color="#FFFFFF" bor-color="#32c5ff33">待审核</z-tag>
          <z-tag color="#32C5FF" bg-color="#32c5ff26" bor-color="#32c5ff33">待审核</z-tag>
          <z-tag color="#60BAA7" bg-color="#60baa826" bor-color="#60baa733">审批中</z-tag>
          <z-tag color="#e6a23c" bg-color="#fdf6ec" bor-color="#faecd8">未通过</z-tag>
          <z-tag color="#6DD400" bg-color="#6dd40026" bor-color="#6dd40033">已通过</z-tag>
          <z-tag color="#E02020" bg-color="#e0202026" bor-color="#e0202033">审核失败</z-tag>
        </z-line>
        <z-line lableName="版本号：">v0.0.6</z-line>
      </z-card>
    </div>

  </div>
</template>

<script>
import zTag from './components/zTag'
import zLine from './components/zLine'
import zCard from './components/zCard'
import zTip from './components/zTip'
import zSearch from './components/zSearch'
export default {
  name: 'app',
  components: {
    zTag,zLine,zCard,zTip,zSearch
  },
  data () {
    return {
      list:[
        {
          name: '用户管理',
          url: '/user'
        },
        {
          name: '角色管理',
          url: '/role'
        },
        {
          name: '日志管理',
          url: '/log'
        }
      ]
    }
  }
}
</script>

<style>
#app{
  text-align: center;
}
  .content{
    width: 400px;
    margin: 20px auto;
  }
</style>
